import React, { Component } from 'react';
import {
	StyleSheet, Text, View, Image, TouchableOpacity, PixelRatio
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import Swipeable from 'react-native-swipeable';
const scale = GLOBAL.SCALE;
export class SwipeableItem extends Component {
	constructor(props) {
		super(props);
		this.state = {
			currentlyOpenSwipeable: null,
			isSwiping: false,
		}
	}


	//
	handleUserBeganScrollingParentView () {
		console.log('1222222222222222222222')
		currentlyOpenSwipeable && currentlyOpenSwipeable.recenter();
	}


	//打开
	_onOpen = (event, gestureState, swipeable) => {
		const { currentlyOpenSwipeable } = this.state;
		if (currentlyOpenSwipeable && currentlyOpenSwipeable !== swipeable) {
			currentlyOpenSwipeable.recenter();
		}
		this.setState({ currentlyOpenSwipeable: swipeable });
	}

	//关闭
	_onClose = () => {
		this.setState({ currentlyOpenSwipeable: null })
	}

	// 点击删除事件
	_removePressFn = () => {
		let { removePress, data } = this.props;
		let { currentlyOpenSwipeable } = this.state;
		currentlyOpenSwipeable && currentlyOpenSwipeable.recenter();
		this.setState({ currentlyOpenSwipeable: null });
		removePress && removePress(data);
	}



	/* 
		data:数据 ,
		imgObj:图片
		removePress:点击删除函数  
	*/
	render () {

		let { imgObj, data, goDetail } = this.props;
		let { beginDate, noticeNo, isRead, noticeSubject } = data;
		return (
			<Swipeable
				rightButtons={[
					<TouchableOpacity style={[styles.removeBox, { backgroundColor: '#EE5D5D' }]} onPress={this._removePressFn}>
						<View style={styles.listRemoveBox}>
							<Text style={styles.listRemoveText}>删除</Text>
						</View>
					</TouchableOpacity>
				]}
				onSwipeStart={() => this.setState({ isSwiping: true })}
				onSwipeRelease={() => this.setState({ isSwiping: false })}
				onRightButtonsOpenRelease={this._onOpen}
				onRightButtonsCloseRelease={this._onClose}
			>
				<View style={styles.listItemBox}>
					<TouchableOpacity style={styles.listItem} onPress={() => { goDetail && goDetail(noticeNo) }} >
						<Image style={styles.listLog} source={imgObj} />
						<View style={styles.centerBox}>
							<View style={styles.titleBox}>
								<Text style={styles.listTitle} >{noticeSubject}</Text>
								<Text style={isRead == 0 ? styles.read : ''}>{isRead == 0 ? '未读' : ''}</Text>
							</View>
							<View style={styles.readBox}>
								<Text style={[styles.timer, { paddingLeft: 5 * scale }]}>时间：{beginDate && beginDate.split(' ')[0]}</Text>
							</View>
						</View>
					</TouchableOpacity>
				</View>
			</Swipeable>
		)
	}
}
const styles = StyleSheet.create({
	listItemBox: {
		backgroundColor: style.color.white,
		borderBottomWidth: 1 / PixelRatio.get(),
		borderStyle: 'solid',
		borderBottomColor: style.color.border,
		paddingLeft: 15 * scale,
		paddingRight: 15 * scale,
	},
	listItem: {
		height: 73 * scale,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
	},
	listLog: {
		width: 40 * scale,
		height: 40 * scale,
		marginRight: 15 * scale
	},
	centerBox: {
		flex: 1
	},
	removeBox: {
		flex: 1,
		justifyContent: 'center'
	},
	listRemoveBox: {
		width: 73 * scale,
		height: 73 * scale,
		backgroundColor: '#EE5D5D'
	},
	listRemoveText: {
		color: style.color.white,
		lineHeight: 73 * scale,
		textAlign: 'center'
	},
	readBox: {
		flexDirection: 'row',
		justifyContent: 'space-between'
	},
	read: {
		color: '#fff',
		backgroundColor: style.color.themeColor,
		width: 30 * scale,
		height: 15 * scale,
		fontSize: 11 * scale,
		borderRadius: 8 * scale,
		textAlign: 'center'
	},
	titleBox: {
		flexDirection: 'row',
		height: 20 * scale,
		justifyContent: 'space-between',
		marginBottom: 4 * scale,
	},
	listTitle: {
		fontSize: 14 * scale,
		color: style.color.dark,
		marginHorizontal: 5,
		flexShrink: 1
	},
	timer: {
		fontSize: 12 * scale,
		color: '#626262'
	},
})